import React, { useEffect, useState } from "react"
import { Table, Input, Tree, Space } from "antd"
import {
  SearchOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined
} from "@ant-design/icons"
import { TableToolbar } from "app/components"
import { useUnmount } from "hooks"

import moment from "moment"
import { treeData } from "constants/dict"
import { getUserList } from "api/system/users"

const Users: React.FC = () => {
  const componentProps = [
    {
      col: 5,
      key: "userName",
      type: "input",
      label: "用户名称",
      labelwidth: 90,
      placeholder: "请输入用户名称"
    },
    {
      col: 5,
      key: "phoneNumber",
      type: "input",
      label: "手机号码",
      labelwidth: 90,
      placeholder: "请输入用户名称"
    },
    {
      col: 4,
      key: "status",
      type: "select",
      label: "状态",
      labelwidth: 40,
      placeholder: "请选择状态"
    },
    {
      col: 6,
      key: ["beginTime", "endTime"],
      label: "创建时间",
      labelwidth: 70,
      type: "rangePicker"
    }
  ]

  const columns = [
    {
      title: "序号",
      width: 80,
      render: (text, record, index) => `${index + 1}`
    },
    {
      title: "用户名称",
      dataIndex: "userName",
      key: "userName"
    },
    {
      title: "用户昵称",
      dataIndex: "nickName",
      key: "nickName"
    },
    {
      title: "部门",
      dataIndex: "deptId",
      key: "deptId"
    },
    {
      title: "手机号码",
      dataIndex: "phone",
      key: "phone"
    },
    {
      title: "状态",
      dataIndex: "delFlag",
      key: "delFlag"
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      render: (time) => {
        return <span>{moment(time).format("YYYY-MM-DD HH:mm:ss")}</span>
      }
    },
    {
      title: "Action",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      )
    }
  ]

  const [loading, setLoading] = useState(false)
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 10 })
  const [dataSource, setDataSource] = useState([])

  // 页面卸载
  useUnmount(() => {
    setLoading(false)
  })

  const getList = async () => {
    try {
      const res = await getUserList({ ...queryParams })
      if (res.code === 200) {
        setDataSource(res.data.rows)
      }
      setLoading(false)
    } catch (e) {
      console.log(e)
      setLoading(false)
    }
  }

  // 页面初始化
  useEffect(() => {
    setLoading(true)
    getList()
  }, [])

  const onSelectChange = (rowKeys) => {
    setSelectedRowKeys(rowKeys)
  }

  const onSelect = (selectedKeys: React.Key[], info: any) => {
    console.log("selected", selectedKeys, info)
  }

  const buttonProps = [
    {
      label: "新增",
      icon: <PlusOutlined />,
      onClick: () => console.log("add")
    },
    {
      label: "修改",
      icon: <EditOutlined />,
      onClick: () => console.log("edit")
    },
    {
      label: "删除",
      danger: true,
      icon: <DeleteOutlined />,
      onClick: () => console.log("delete")
    }
  ]

  return (
    <div className="flex">
      <div className="table-tree-right pt-4">
        <Input placeholder="请输入部门名称" prefix={<SearchOutlined />} />
        <Tree
          className="mt-8"
          blockNode
          defaultExpandAll
          onSelect={onSelect}
          treeData={treeData}
        />
      </div>
      <div className="flex-1 ml20">
        <TableToolbar
          getList={getList}
          queryParams={queryParams}
          setQueryParams={setQueryParams}
          buttonProps={buttonProps}
          componentProps={componentProps}
        />
        <Table
          rowKey="userId"
          loading={loading}
          columns={columns}
          dataSource={dataSource}
          rowSelection={{
            selectedRowKeys,
            onChange: onSelectChange
          }}
        />
      </div>
    </div>
  )
}

export default Users
